<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用详情 - AppStore</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        'gray-100': '#F7F8FA',
                        'gray-200': '#E5E6EB',
                        'gray-300': '#C9CDD4',
                        'gray-400': '#86909C',
                        'gray-500': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 10px 30px rgba(22, 93, 255, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 0.3s ease;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .rating-star {
                position: relative;
                display: inline-block;
                width: 1.25rem;
                height: 1.25rem;
                overflow: hidden;
            }
            .rating-star-fill {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                overflow: hidden;
                color: #FFD700;
            }
            .rating-star-empty {
                color: #E5E6EB;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-100 text-dark">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <div class="flex items-center">
                    <a href="/" class="flex items-center">
                        <i class="fa-solid fa-store text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold text-primary">AppStore</span>
                    </a>
                    <nav class="hidden md:ml-10 md:flex space-x-8">
                        <a href="#" class="text-primary font-medium">首页</a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">分类</a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">排行</a>
                        <a href="#" class="text-gray-500 hover:text-primary transition-colors">新品</a>
                    </nav>
                </div>
                <div class="flex items-center">
                    <div class="relative mr-4 hidden md:block">
                        <input type="text" placeholder="搜索应用..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64 transition-all">
                        <i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    </div>
                    <button class="p-2 rounded-full hover:bg-gray-100 transition-colors">
                        <i class="fa-solid fa-user text-gray-500"></i>
                    </button>
                    <button class="ml-2 p-2 rounded-full hover:bg-gray-100 transition-colors md:block hidden">
                        <i class="fa-solid fa-bell text-gray-500"></i>
                    </button>
                    <button class="ml-2 p-2 rounded-full hover:bg-gray-100 transition-colors md:hidden">
                        <i class="fa-solid fa-bars text-gray-500"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-16">
        <!-- 面包屑导航 -->
        <div class="text-sm text-gray-500 mb-6">
            <a href="/" class="hover:text-primary transition-colors">首页</a>
            <span class="mx-2">/</span>
            <span id="breadcrumb-category">应用详情</span>
        </div>

        <!-- 应用详情 -->
        <div class="bg-white rounded-2xl shadow-card p-6 md:p-8 mb-8 transform transition-all duration-300 hover:shadow-card-hover">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- 应用信息 -->
                <div class="md:col-span-2">
                    <div class="flex flex-col sm:flex-row sm:items-start gap-6">
                        <div class="flex-shrink-0">
                            <img id="app-icon" src="https://picsum.photos/id/10/200/200" alt="应用图标" class="w-24 h-24 sm:w-32 sm:h-32 rounded-2xl shadow-lg object-cover border-4 border-white">
                        </div>
                        <div>
                            <h1 id="app-name" class="text-2xl sm:text-3xl font-bold text-dark mb-2">应用名称</h1>
                            <div class="flex items-center mb-3">
                                <div class="flex items-center mr-3">
                                    <div class="flex items-center">
                                        <div class="rating-star">
                                            <i class="rating-star-fill fa-solid fa-star"></i>
                                            <i class="rating-star-empty fa-solid fa-star"></i>
                                        </div>
                                        <div class="rating-star">
                                            <i class="rating-star-fill fa-solid fa-star"></i>
                                            <i class="rating-star-empty fa-solid fa-star"></i>
                                        </div>
                                        <div class="rating-star">
                                            <i class="rating-star-fill fa-solid fa-star"></i>
                                            <i class="rating-star-empty fa-solid fa-star"></i>
                                        </div>
                                        <div class="rating-star">
                                            <i class="rating-star-fill fa-solid fa-star"></i>
                                            <i class="rating-star-empty fa-solid fa-star"></i>
                                        </div>
                                        <div class="rating-star">
                                            <i class="rating-star-fill fa-solid fa-star-half-stroke"></i>
                                            <i class="rating-star-empty fa-solid fa-star"></i>
                                        </div>
                                    </div>
                                    <span id="app-rating" class="ml-1 text-gray-500">4.5</span>
                                </div>
                                <span id="app-downloads" class="text-gray-500">100万+ 下载</span>
                            </div>
                            <div class="flex flex-wrap gap-2 mb-4">
                                <span id="app-category" class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">效率工具</span>
                                <span id="app-platform" class="px-3 py-1 bg-gray-100 text-gray-500 rounded-full text-sm">Android / iOS</span>
                                <span id="app-size" class="px-3 py-1 bg-gray-100 text-gray-500 rounded-full text-sm">48.6 MB</span>
                                <span id="app-version" class="px-3 py-1 bg-gray-100 text-gray-500 rounded-full text-sm">版本 3.2.1</span>
                            </div>
                            <div class="flex flex-wrap gap-3" id="download-btn">
                                <button class="px-6 py-2 bg-primary hover:bg-primary/90 text-white rounded-full font-medium transition-all flex items-center shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
                                    <i class="fa-solid fa-download mr-2"></i>
                                    立即下载
                                </button>
                
                                <button class="p-2 border border-gray-200 rounded-full hover:bg-gray-100 transition-colors">
                                    <i class="fa-solid fa-share-alt text-gray-500"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 应用描述 -->
                    <div class="mt-8">
                        <h2 class="text-xl font-bold mb-4">应用介绍</h2>
                        <div id="app-description" class="text-gray-600 leading-relaxed mb-6">
                            应用描述内容将在这里显示...
                        </div>

                        <!-- 应用特点 -->
                        <h2 class="text-xl font-bold mb-4">应用特点</h2>
                        <div id="app-features" class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
                            <!-- 特点将通过JS动态加载 -->
                        </div>

                        <!-- 应用截图 -->
                        <h2 class="text-xl font-bold mb-4">应用截图</h2>
                        <div id="app-screenshots" class="relative overflow-hidden mb-6">
                            <div class="flex space-x-4 overflow-x-auto pb-4 scrollbar-hide">
                                <!-- 截图将通过JS动态加载 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 侧边栏 -->
                <div class="md:col-span-1">
                    <!-- 评分与评论 -->
                    <div class="bg-gray-50 rounded-xl p-6 mb-6">
                        <h2 class="text-xl font-bold mb-4">评分与评论</h2>
                        
                        <!-- 评分分布 -->
                        <div class="flex items-center mb-6">
                            <div class="text-center mr-6">
                                <span id="app-total-rating" class="text-4xl font-bold">4.5</span>
                                <div class="flex justify-center mt-1">
                                    <i class="fa-solid fa-star text-yellow-400"></i>
                                </div>
                                <span class="text-sm text-gray-500 mt-1">基于 <span id="app-review-count">128</span> 条评论</span>
                            </div>
                            <div class="flex-1">
                                <div id="rating-distribution" class="space-y-2">
                                    <!-- 评分分布将通过JS动态加载 -->
                                </div>
                            </div>
                        </div>
                        
                        <!-- 最新评论 -->
                        <h3 class="font-bold mb-3">最新评论</h3>
                        <div id="app-reviews" class="space-y-4">
                            <!-- 评论将通过JS动态加载 -->
                        </div>
                        
                        <button class="w-full mt-4 py-2 border border-primary text-primary rounded-full hover:bg-primary/5 transition-colors">
                            查看全部评论
                        </button>
                    </div>
                    
                    <!-- 相关应用 -->
                    <div class="bg-gray-50 rounded-xl p-6">
                        <h2 class="text-xl font-bold mb-4">相关应用</h2>
                        <div id="related-apps" class="space-y-4">
                            <!-- 相关应用将通过JS动态加载 -->
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </main>
    <main>

      <!-- 下载弹窗 (默认隐藏) -->
    <div id="download-modal" class="fixed inset-0 z-50 flex items-center justify-center hidden">
      <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="modal-overlay"></div>
      <div class="relative bg-white rounded-2xl w-full max-w-md mx-4 shadow-xl transform transition-all duration-300 scale-95 opacity-0" id="modal-content">
        <div class="p-6">
          <div class="flex justify-between items-center mb-4">
            <h3 class="text-xl font-bold text-neutral-700">下载应用</h3>
            <button id="close-modal" class="text-neutral-500 hover:text-neutral-700 transition-colors">
              <i class="fa fa-times text-xl"></i>
            </button>
          </div>
          
          <div class="flex items-center space-x-4 mb-6">
            <div class="w-16 h-16 rounded-xl overflow-hidden bg-neutral-100">
              <img src="https://picsum.photos/id/10/200/200" alt="应用图标" class="w-full h-full object-cover" id="modal-icon">
            </div>
            <div>
              <h4 class="font-bold text-neutral-700" id="modal-title"></h4>
              <p id="modal-size" class="text-sm text-neutral-500">版本: 3.2.1 | 大小: 48.6 MB</p>
            </div>
          </div>
          
          <div class="space-y-4 mb-6">
            <p class="text-neutral-700">选择下载方式:</p>
            
            <a href="#" class="block p-4 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-colors flex items-center" id="pan_link">
              <i class="fa fa-cloud-download text-primary text-xl mr-3"></i>
              <div>
                <h5 class="font-medium text-neutral-700">网盘下载</h5>
                <p class="text-sm text-neutral-500">高速稳定，支持断点续传</p>
              </div>
            </a>
            
            <a href="#" class="block p-4 border border-neutral-200 rounded-xl hover:bg-neutral-50 transition-colors flex items-center">
              <i class="fa fa-link text-primary text-xl mr-3"></i>
              <div>
                <h5 class="font-medium text-neutral-700">直接下载</h5>
                <p class="text-sm text-neutral-500">快速下载，可能需要手动安装</p>
              </div>
            </a>
          </div>
          
          <div class="pt-4 border-t border-neutral-200">
            <p class="text-xs text-neutral-500 mb-4">点击下载即表示你同意我们的<a href="#" class="text-primary hover:underline">服务条款</a>和<a href="#" class="text-primary hover:underline">隐私政策</a></p>
            <button id="cancel-download" class="w-full bg-neutral-100 hover:bg-neutral-200 text-neutral-700 font-medium py-3 px-4 rounded-xl transition-colors">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>

    </main>
    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center mb-4">
                        <i class="fa-solid fa-store text-primary text-2xl mr-2"></i>
                        <span class="text-xl font-bold">AppStore</span>
                    </div>
                    <p class="text-gray-400 mb-4">发现最好的应用，提升你的数字生活</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa-brands fa-linkedin"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">应用分类</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">效率工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">游戏娱乐</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">社交网络</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">生活服务</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">教育学习</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">支持</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">帮助中心</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">开发者</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">订阅我们</h3>
                    <p class="text-gray-400 mb-4">获取最新的应用推荐和独家优惠</p>
                    <div class="flex">
                        <input type="email" placeholder="你的邮箱地址" class="px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-primary w-full text-dark">
                        <button class="bg-primary hover:bg-primary/90 px-4 py-2 rounded-r-lg transition-colors">
                            <i class="fa-solid fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
                <p>&copy; 2025 AppStore. 保留所有权利。</p>
            </div>
        </div>
    </footer>
    <script>
      const downloadBtn = document.getElementById('download-btn');  
    const downloadModal = document.getElementById('download-modal');
    const modalContent = document.getElementById('modal-content');
    const modalOverlay = document.getElementById('modal-overlay');
    const closeModal = document.getElementById('close-modal');
    const cancelDownload = document.getElementById('cancel-download');
      function openModal() {
        getAppLink()
      downloadModal.classList.remove('hidden');
      // 延迟添加动画类以确保过渡效果生效
      setTimeout(() => {
        modalContent.classList.remove('scale-95', 'opacity-0');
        modalContent.classList.add('scale-100', 'opacity-100');
      }, 10);


     
    }
    
    function closeModalFunc() {
      modalContent.classList.remove('scale-100', 'opacity-100');
      modalContent.classList.add('scale-95', 'opacity-0');
      setTimeout(() => {
        downloadModal.classList.add('hidden');
      }, 300);
    }
    
    downloadBtn.addEventListener('click', openModal);
    closeModal.addEventListener('click', closeModalFunc);
    cancelDownload.addEventListener('click', closeModalFunc);
    modalOverlay.addEventListener('click', closeModalFunc);
    
    // 导航栏滚动效果
    const header = document.querySelector('header');
    let lastScrollTop = 0;
    
    window.addEventListener('scroll', () => {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      
      if (scrollTop > 50) {
        header.classList.add('shadow-md');
      } else {
        header.classList.remove('shadow-md');
      }
      
      lastScrollTop = scrollTop;
    });
    downloadBtn.addEventListener('click', openModal);
    closeModal.addEventListener('click', closeModalFunc);
    cancelDownload.addEventListener('click', closeModalFunc);
    modalOverlay.addEventListener('click', closeModalFunc);
    </script>
    <script>



        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.classList.add('shadow-md');
                navbar.classList.add('bg-white/95');
                navbar.classList.add('backdrop-blur-sm');
            } else {
                navbar.classList.remove('shadow-md');
                navbar.classList.remove('bg-white/95');
                navbar.classList.remove('backdrop-blur-sm');
            }
        });

        // 获取URL参数
        function getQueryParam(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        function getOSName() {
            var os = navigator.platform;
            if (os.indexOf("Win") != -1) {
                return "windows"
            } else if (os.indexOf("Mac") != -1) {
                return "mac"
            } else {
                return ""
            }
        }

        function getAppLink() {
            var os = getOSName()
          const appId = getQueryParam('id');
          fetch(`/api/app/link?id=${appId}&os=${os}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('应用不存在或获取失败');
                    }
                    return response.json();
                })
                .then(app => {
                  console.log(app)
                  document.getElementById("pan_link").href = app.list[0].downloadUrl
                })
        }
        // 加载应用详情
        function loadAppDetail() {
            const appId = getQueryParam('id');
            if (!appId) {
                alert('未指定应用ID');
                window.location.href = '/';
                return;
            }

            fetch(`/api/apps/${appId}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('应用不存在或获取失败');
                    }
                    return response.json();
                })
                .then(app => {
                    // 更新面包屑导航
                    document.getElementById('breadcrumb-category').textContent = app.Category;
                    console.log(app)
                    // 更新应用信息
                    document.getElementById('modal-title').textContent = app.name;
                    document.getElementById('modal-icon').src = app.icon;
                    document.getElementById('app-name').textContent = app.name;
                    document.getElementById('app-icon').src = app.icon;
                    document.getElementById('app-rating').textContent = app.rating.toFixed(1);
                    document.getElementById('app-downloads').textContent = app.downloads;
                    document.getElementById('app-category').textContent = app.category;
                    document.getElementById('app-platform').textContent = app.platform;
                    document.getElementById('app-size').textContent = app.size;
                    document.getElementById('app-version').textContent = `版本 ${app.version}`;
                    document.getElementById('app-description').textContent = app.description;
                    document.getElementById('app-total-rating').textContent = app.rating.toFixed(1);
                    document.getElementById('modal-size').textContent = app.version+ " | "+app.size
                    
                    // 更新评分分布
                    const ratingDistribution = document.getElementById('rating-distribution');
                    ratingDistribution.innerHTML = '';
                    
                    // 计算总评论数
                    let totalReviews = 0;
                    for (let i = 1; i <= 5; i++) {
                        totalReviews += app.ratingDistribution[i] || 0;
                    }
                    
                    document.getElementById('app-review-count').textContent = totalReviews;
                    
                    // 生成评分分布条
                    for (let i = 5; i >= 1; i--) {
                        const count = app.ratingDistribution[i] || 0;
                        const percentage = totalReviews > 0 ? Math.round((count / totalReviews) * 100) : 0;
                        
                        const ratingBar = document.createElement('div');
                        ratingBar.className = 'flex items-center';
                        ratingBar.innerHTML = `
                            <span class="text-sm w-6">${i}星</span>
                            <div class="w-full mx-2 bg-gray-200 rounded-full h-2">
                                <div class="bg-yellow-400 h-2 rounded-full" style="width: ${percentage}%"></div>
                            </div>
                            <span class="text-sm w-10 text-right">${percentage}%</span>
                        `;
                        ratingDistribution.appendChild(ratingBar);
                    }
                    
                    // 更新应用特点
                    const featuresContainer = document.getElementById('app-features');
                    featuresContainer.innerHTML = '';
                    
                    app.features.forEach(feature => {
                        const featureCard = document.createElement('div');
                        featureCard.className = 'bg-white p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow';
                        featureCard.innerHTML = `
                            <div class="flex items-start">
                                <div class="flex-shrink-0 bg-primary/10 p-2 rounded-lg">
                                    <i class="fa-solid fa-check text-primary"></i>
                                </div>
                                <div class="ml-3">
                                    <h3 class="font-semibold mb-1">${feature.title}</h3>
                                    <p class="text-sm text-gray-600">${feature.description}</p>
                                </div>
                            </div>
                        `;
                        featuresContainer.appendChild(featureCard);
                    });
                    
                    // 更新应用截图
                    const screenshotsContainer = document.getElementById('app-screenshots').querySelector('div');
                    screenshotsContainer.innerHTML = '';
                    
                    app.screenshots.forEach(screenshot => {
                        const screenshotItem = document.createElement('div');
                        screenshotItem.className = 'flex-shrink-0 w-[280px] h-[480px] rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-shadow';
                        screenshotItem.innerHTML = `
                            <img src="${screenshot}" alt="应用截图" class="w-full h-full object-cover">
                        `;
                        screenshotsContainer.appendChild(screenshotItem);
                    });
                    
                    // 更新应用评论
                    const reviewsContainer = document.getElementById('app-reviews');
                    reviewsContainer.innerHTML = '';
                    
                    app.reviews.forEach(review => {
                        const reviewCard = document.createElement('div');
                        reviewCard.className = 'border-b border-gray-200 pb-4';
                        
                        // 生成评分星星
                        let starsHTML = '';
                        for (let i = 1; i <= 5; i++) {
                            if (i <= review.Rating) {
                                starsHTML += '<i class="fa-solid fa-star text-yellow-400"></i>';
                            } else {
                                starsHTML += '<i class="fa-regular fa-star text-gray-300"></i>';
                            }
                        }
                        
                        reviewCard.innerHTML = `
                            <div class="flex items-start">
                                <img src="${review.avatar}" alt="${review.username}" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3 flex-1">
                                    <div class="flex justify-between items-start">
                                        <h4 class="font-medium">${review.username}</h4>
                                        <span class="text-sm text-gray-500">${review.date}</span>
                                    </div>
                                    <div class="flex mt-1">
                                        ${starsHTML}
                                    </div>
                                    <p class="mt-2 text-gray-600">${review.content}</p>
                                </div>
                            </div>
                        `;
                        reviewsContainer.appendChild(reviewCard);
                    });
                    
                    // 加载相关应用（模拟数据）
                    loadRelatedApps(app.category);
                })
                .catch(error => {
                    alert(error.message);
                    // window.location.href = '/';
                });
        }

        // 加载相关应用
        function loadRelatedApps(category) {
            fetch('/api/apps')
                .then(response => response.json())
                .then(apps => {
                    const relatedAppsContainer = document.getElementById('related-apps');
                    relatedAppsContainer.innerHTML = '';
                    
                    // 筛选相同类别的应用，并排除当前应用
                    const relatedApps = apps
                        .filter(app => app.category === category)
                        .slice(0, 4);
                    
                    relatedApps.forEach(app => {
                        const relatedAppCard = document.createElement('div');
                        relatedAppCard.className = 'flex items-center p-3 bg-white rounded-lg hover:bg-gray-50 transition-colors cursor-pointer';
                        relatedAppCard.innerHTML = `
                            <img src="${app.icon}" alt="${app.name}" class="w-12 h-12 rounded-lg object-cover">
                            <div class="ml-3 flex-1">
                                <h4 class="font-medium truncate">${app.name}</h4>
                                <div class="flex items-center mt-1">
                                    <div class="flex">
                                        <i class="fa-solid fa-star text-yellow-400 text-xs"></i>
                                        <span class="text-xs text-gray-500 ml-1">100</span>
                                    </div>
                                    <span class="text-xs text-gray-400 ml-2">${app.category}</span>
                                </div>
                            </div>
                            <button class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors">
                                获取
                            </button>
                        `;
                        
                        // 添加点击事件，跳转到应用详情页
                        relatedAppCard.addEventListener('click', () => {
                            window.location.href = `/detail?id=${app.id}`;
                        });
                        
                        relatedAppsContainer.appendChild(relatedAppCard);
                    });
                })
                .catch(error => {
                    console.error('加载相关应用失败:', error);
                });
        }

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            loadAppDetail();
        });
    </script>
</body>
</html>    